<template>
  <div class="public-activities">
    <h1>公开活动列表</h1>
    <div class="activity-list">
      <div 
        v-for="activity in activities" 
        :key="activity.id" 
        class="activity-card"
        @click="goToDetail(activity.id)"
      >
        <h3>{{ activity.title }}</h3>
        <p><strong>日期:</strong> {{ activity.date }}</p>
        <p><strong>地点:</strong> {{ activity.location }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import activities from '../data/activities'

export default {
  name: 'PublicActivities',
  data() {
    return {
      activities: activities
    }
  },
  methods: {
    goToDetail(id) {
      this.$router.push({ name: 'ActivityDetail', params: { id } })
    }
  }
}
</script>

<style scoped>
.public-activities {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.activity-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.activity-card {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  cursor: pointer;
  transition: transform 0.2s;
}
.activity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.activity-card h3 {
  margin-top: 0;
  color: #0087ff;
}
</style>
